<template>
  <div>
    <div class="navTab">
      <div class="left">
        <span @click="togetIntegrated" :class="type==1? 'active' :''">综合榜</span>
        <span @click="togetPopTraining" :class="type==2? 'active' :''">热练榜</span>
        <span @click="togetNewcomer(1,3)" :class="type==3? 'active' :''">新锐榜</span>
        <span @click="togetNewcomer(2,4)" :class="type==4? 'active' :''">最新</span>
      </div>
      <div class="right" @click="isShow = !isShow">
        <span>筛选</span>
        <el-button
          v-show="!isShow"
          size="default"
          icon="ele-ArrowDown"
          class="elButton"
        ></el-button>
      </div>
    </div>
    <div class="filter-container" ref="filterFold" v-show="isShow">
      <div class="reset" @click="reset" ref="resetRef">重置</div>
      <div class="demo-collapse">
        <el-container
          class="el-container"
          v-for="item in ChoisesList"
          :key="item.label"
        >
          <el-aside width="8.33333%" class="filter-label"
            >{{ item.label }}:</el-aside
          >
          <el-main class="filter-content-col">
            <div
              @click="addChoiseList(item.name, select.id,select.name)"
              :class="
                filterInfo.find((item) =>
                  item.filterValue.find((itemId) => itemId == select.id)
                )
                  ? 'select-item active'
                  : 'select-item'
              "
              v-for="select in item.choises"
              :key="select.id"
            >
              {{ select.name }}
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Slection',
});
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useResourceStore } from '@/store/resource';
import { ElMessage } from 'element-plus';
const isShow = ref(false);
const resetRef = ref()
const type = ref(1)
const resourceStore = useResourceStore();
const { ChoisesList} = storeToRefs(resourceStore);
const { getPropertiesFilter, getIntegrated, getPopTraining, getNewcomer ,getLastest} =
  resourceStore;
onMounted(() => {
    getPropertiesFilter()
});

const togetIntegrated = () => {
  getIntegrated(1, 20);
  type.value = 1
};

const togetPopTraining = () => {
  getPopTraining(1, 20);
  type.value = 2
};

const togetNewcomer = (pageNum:number,typeValue:number) => {
  getNewcomer(pageNum, 10);
  type.value = typeValue
};

//点击添加到选中
const filterInfo = ref<
  {
    filterCode: string;
    filterValue: string[];
    avocationNames:string[];
  }[]
>([]);
const addChoiseList = (itemname: string, id: string,selectname:string) => {
    console.log(resetRef.value);
    resetRef.value.style.display = 'block'
  const codeNum = filterInfo.value.findIndex(
    (item) => item.filterCode === itemname
  );
  if (codeNum !== -1) {
    //能找到name
    if (!!filterInfo.value[codeNum].filterValue.find((item) => item == id)) {
      //能找到id 删除
      filterInfo.value[codeNum].filterValue.splice(
        filterInfo.value[codeNum].filterValue.indexOf(id),
        1
      );
      getLastest(1,20,filterInfo.value)
    } else {
      //找不到id 添加
      if (filterInfo.value[codeNum].filterValue.length >= 3) {
        // 长度大于3
        ElMessage({
          message: '每个类型最多选择3项',
        });
        return;
      } else {
        filterInfo.value[codeNum].avocationNames.push(selectname);
        filterInfo.value[codeNum].filterValue.push(id);
        getLastest(1,20,filterInfo.value)
      }
    }
  } else {
    //找不到name直接添加
    filterInfo.value.push({
      filterCode: itemname,
      filterValue: [id],
      avocationNames:[selectname]
    });
    getLastest(1,20,filterInfo.value)
  }
};

// 点击重置
const reset = ()=>{
    filterInfo.value = []
    resetRef.value.style.display = 'none'
    getIntegrated(1, 20);
}
</script>

<style scoped lang="less">
.navTab {
  margin-top: 40px;
  font-size: 14px;
  color: #7d8090;
  display: flex;
  justify-content: space-between;
  .left {
    span {
      padding-right: 50px;
    }
    span:hover,
    .active {
      color: #f93684;
    }
  }
  .right {
    width: 80px;
    height: 40px;
    background-color: #e9ecec;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    span {
      padding-right: 5px;
      cursor: pointer;
    }
    .elButton {
      background-color: #e9ecec;
      color: #b1b5c1;
      font-size: 18px;
      border: none;
      padding: 0;
    }
  }
}

.filter-container {
  padding: 26px 30px;
  border-radius: 4px;
  background-color: #f5f7f9;
  margin-bottom: 10px;
  position: relative;
  .reset {
    position: absolute;
    top: 30px;
    right: 20px;
    font-size: 14px;
    color: #f93684;
    display: none;
  }
  .demo-collapse {
    .filter-label {
      color: #b1b5c1;
      padding: 7px 0;
      font-size: 14px;
    }
    .filter-content-col {
      padding: 0;
      .select-item {
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
        border-radius: 4px;
        color: #7d8090;
        padding: 5px 13px;
        user-select: none;
        margin-right: 24px;
        margin-bottom: 10px;
      }
      .active {
        background-color: #f93684;
        color: #fff;
      }
    }
  }
}
.filter-content-container.fold {
  height: 133px;
}

.fold-toggle-container {
  text-align: center;
  color: #f93684;
  font-size: 14px;
  margin: 20px 0 0;
  span {
    cursor: pointer;
  }
}
</style>
